<!-- ERC-物资管理-物资AVL厂商页面 -->
<template>
  <div>
    <div v-show="isMain" class="equip-wrap-common">
      <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
        <px-row :gutter="16">
          <px-col :span="5">
            <px-form-item label="AVL厂商">
              <px-input
                v-model="queryParams.name"
                placeholder="请输入AVL厂商"
                autocomplete="off"
                maxlength="50"
                @blur="queryParams.name = $event.target.value.trim()"
                @keyup.enter="queryTable"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="5">
            <px-form-item label="状态">
              <px-select v-model="queryParams.usedStatus" placeholder="请选择" clearable>
                <px-option v-for="item in usedStatusList" :key="item.value" :label="item.label" :value="item.value" />
              </px-select>
            </px-form-item>
          </px-col>
          <px-col :span="4">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <div class="equip-table-btn">
        <px-button v-has="'ERC_MATERIAL_SUPPLIER_ADD'" style="margin-right: 16px" type="primary" @click="handleAdd">新增AVL厂商</px-button>
        <px-button v-has="'ERC_MATERIAL_SUPPLIER_BATCHDELETE'" type="primary" plain @click="batchDelete">批量删除</px-button>
      </div>
      <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 306px)" border @selection-change="selectionChange">
        <px-table-column type="selection" min-width="40" align="center" fixed="left" />
        <px-table-column label="序号" min-width="60" align="center" fixed="left">
          <template #default="{ $index }">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
          </template>
        </px-table-column>
        <px-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <span v-if="item.usedStatus">
              {{ scope.row.usedStatus === "1" ? "启用" : "停用" }}
            </span>
            <span v-else>
              {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
            </span>
          </template>
        </px-table-column>
        <px-table-column fixed="right" label="操作" min-width="120" align="center">
          <template #default="scope">
            <px-tooltip content="编辑" placement="top">
              <px-button
                v-has="'ERC_MATERIAL_SUPPLIER_EDIT'"
                :disabled="scope.row.usedStatus === '0'"
                link
                type="primary"
                icon="EditPen"
                @click="handleEdit(scope.row)"
              />
            </px-tooltip>
            <px-tooltip :content="scope.row.usedStatus === '1' ? '停用' : '启用'" placement="top">
              <px-button
                v-has="'ERC_MATERIAL_SUPPLIER_DOWNUP'"
                link
                :type="scope.row.usedStatus === '1' ? 'warning' : 'success'"
                :icon="scope.row.usedStatus === '1' ? 'CircleClose' : 'CircleCheck'"
                @click="handleEnable(scope.row)"
              />
            </px-tooltip>
            <px-tooltip content="删除" placement="top">
              <px-button v-has="'ERC_MATERIAL_SUPPLIER_DELETE'" link type="danger" icon="Delete" @click="handleDelete(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        style="padding-top: 12px !important"
        class="equip-table-pagination"
        :total="total"
        @pagination="queryTable"
      />
    </div>
    <AddSupplier
      :dialogVisible="checkVisible"
      :drawerType="drawerType"
      :rowData="rowData"
      @closeDialog="
        checkVisible = false;
        queryTable();
      "
    />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ERC_MATERIAL_SUPPLIER"
});
import { onMounted, reactive, toRefs } from "vue";
import { PxMessage, PxMessageBox } from "px-ui";
import AddSupplier from "./components/AddSupplier.vue";
import { deleteMaterialSupplier, queryMaterialSupplier, ableType } from "@/api/erc/material";

const state = reactive<any>({
  isMain: true,
  queryParams: {
    pageNum: 1,
    pageSize: 20,
    name: ""
  },
  tableColumns: [
    { prop: "name", label: "名称", minWidth: "120", showOverflowTooltip: true, fixed: "left" },
    { prop: "avlNo", label: "AVL NO.", minWidth: "120", showOverflowTooltip: true },
    { prop: "contact", label: "联系人", minWidth: "120", showOverflowTooltip: true },
    { prop: "phone", label: "电话", minWidth: "120", showOverflowTooltip: true },
    { prop: "email", label: "邮箱", minWidth: "120", showOverflowTooltip: true },
    { prop: "address", label: "服务内容", minWidth: "120", showOverflowTooltip: true },
    { prop: "remark", label: "备注", minWidth: "120", showOverflowTooltip: true },
    { prop: "usedStatus", label: "状态", minWidth: "120", showOverflowTooltip: true, usedStatus: true, fixed: "right" }
  ],
  tableData: [],
  total: 0,
  selectIds: [],
  drawerType: "add",
  rowData: {},
  toCheckVisible: false,
  checkVisible: false,
  usedStatusList: [
    {
      value: 1,
      label: "启用"
    },
    {
      value: 0,
      label: "停用"
    }
  ]
});
const { isMain, queryParams, tableColumns, tableData, total, selectIds, drawerType, rowData, toCheckVisible, checkVisible, usedStatusList } =
  toRefs(state);

// 进入页面时触发
onMounted(() => {
  queryTable();
});
// 查询供应商列表
const queryTable = async () => {
  const params = JSON.parse(JSON.stringify(queryParams.value));
  const data = await queryMaterialSupplier(params);
  tableData.value = data?.data || [];
  total.value = data?.total;
};
// 重置筛选条件和供应商列表
const resetTable = async () => {
  queryParams.value = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};
// 添加供应商
const handleAdd = () => {
  drawerType.value = "add";
  isMain.value = true;
  checkVisible.value = true;
};
// 编辑供应商
const handleEdit = (row: any) => {
  drawerType.value = "edit";
  rowData.value = JSON.parse(JSON.stringify(row));
  isMain.value = true;
  checkVisible.value = true;
};
/** 启用/禁用按钮操作 */
const handleEnable = row => {
  PxMessageBox.confirm(`是否确认${row.usedStatus === "1" ? "停用" : "启用"}AVL厂商名称为${row.name}的数据项？`, "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      await ableType({ code: row?.code, usedStatus: row.usedStatus === "0" ? "1" : "0" });
      PxMessage.success(`${row.usedStatus === "0" ? "停用" : "启用"}成功`);
      queryTable();
    })
    .catch(() => {});
};
// 删除供应商
const handleDelete = async (row: any) => {
  PxMessageBox.confirm(`要删除当前AVL厂商“${row.name}”吗？`, "提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      const params = {
        idList: [row.id]
      };
      await deleteMaterialSupplier(params);
      PxMessage.success("删除成功");
      queryTable();
    })
    .catch(() => {});
};
// 表格多选框选中-批量导出、批量删除使用
const selectionChange = (val: any) => {
  selectIds.value = [];
  val.forEach((item: any) => {
    if (item.id) {
      selectIds.value.push(item.id);
    }
  });
};
// 批量删除按钮
const batchDelete = async () => {
  if (selectIds.value.length == 0) {
    PxMessage.warning("请选择AVL厂商后操作");
    return;
  }
  PxMessageBox.confirm(`要删除当前已选的 ${selectIds.value.length} 个AVL厂商吗？删除后不可恢复，请谨慎操作`, "提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      const data = await deleteMaterialSupplier({
        idList: selectIds.value
      });
      PxMessage.success("删除成功");
      queryTable();
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
@import url("@/views/erc/scss/table-list.scss");
</style>
